<template>
    <div class="goods">
      <goods-list-item v-for="item in goods" :goods-item="item" />
    </div>
</template>

<script>
  import GoodsListItem from "./GoodsListItem";
  export default {
    name: "GoodsList",
    components: {GoodsListItem},
    props: {
      goods: {
        type: Array,
        default(){
          return []
        }
      }
    },

  }
</script>

<style scoped>
  .goods {
    display: flex;
    flex-wrap: wrap;/*会自动换行*/
    justify-content: space-around;/*子标签均等分*/
    padding: 0px 1%;
  }
  /*采用 Flex 布局的元素，称为 Flex 容器（flex container），
  简称"容器"。它的所有子元素自动成为容器成员，
  称为 Flex 项目（flex item），简称"项目"。*/
</style>
